<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <!-- 当前学校信息form -->
        <div>
          <div class="box-header">
            <h3 class="box-title" style="line-height: 40px;float: left;">当前学校信息</h3>
          </div>
          <div class="box-body">
            <el-form ref="form" label-width="100px">
              <el-col :span="6">
                <el-form-item label="学校代码">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_code" :disabled="boxDisabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学校名称">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_name" :disabled="boxDisabled"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学校性质">
                  <el-select size="small" class="input-width" v-model="currentSch.sch_property" loading-text="请选择" clearable>
                    <el-option
                      v-for="item in propertys"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真" >
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_faxaphone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学校隶属">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_type"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主管部门">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_authorities"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="办学层次">
                  <el-select size="small" class="input-width" v-model="currentSch.sch_level" loading-text="请选择" clearable>
                    <el-option
                      v-for="item in levels"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="省份">
                  <el-select size="small" class="input-width" v-model="currentSch.sch_province" loading-text="请选择" clearable>
                    <el-option
                      v-for="item in provinces"
                      :key="item.code"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="位置">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_address"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="详细地址">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_postal_address"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编">
                  <el-input size="small" class="input-width" placeholder="请输入内容" v-model="currentSch.sch_postal_code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="text-align: center; margin-top: 8px;">
                <el-button type="success" size="small" icon="el-icon-edit" @click="editSch()" v-if="editBtn">修改</el-button>
                <el-button type="primary" size="small" icon="el-icon-refresh-right" v-if="seeSchList" @click="reSch()" :disabled="reBtnDis">重置</el-button>
                <el-button type="success" size="small" icon="el-icon-position" @click="saveSch()" v-if="addBtn">添加</el-button>
              </div>
              </el-col>
            </el-form>
          </div>
        </div>
        <!-- 显示学校列表list -->
        <div v-if="seeSchList" style="border-top: 1px dashed #d2d6de; margin-top: 12px;"> 
          <!-- 搜索 -->
          <div class="box-header">
            <h3 class="box-title" style="line-height: 40px;float: left;">所有学校信息</h3>
            <el-form :model="searchData">
              <el-input
                size="small"
                style="width: 11%; margin: 0 19px 0 50px;"
                placeholder="学校代码"
                clearable
                v-model="searchData.sch_code"
              ></el-input>
              <el-input
                size="small"
                style="width: 11%; margin-right: 19px;"
                placeholder="学校名称"
                clearable
                v-model="searchData.sch_name"
              ></el-input>
              <!-- <el-select size="small" class="input-width" v-model="searchData.sch_province" placeholder="请选择省份" clearable style="width: 11%; margin-right: 19px;">
                <el-option
                  v-for="item in provinces"
                  :key="item.code"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select> -->
              <el-button style="background: rgba(247, 210, 6, 1); color: black;" size="small" icon="el-icon-search" @click="searchSch()">搜索</el-button>
              <el-button type="danger" size="small" :loading="deleteLoading" v-if="multipleSelection.length > 0" icon="el-icon-delete" @click="deleteSch(multipleSelection)">删除</el-button>
            </el-form>
          </div>
          <!-- 列表信息 -->
          <div class="box-body">
            <el-table
              :data="schList"
              v-loading="loading"
              class="tableBox"
              stripe
              style="width: 100%"
              :cell-style="{padding:'8px 0px'}"
              @row-click="clickRow"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" :context="_self" width="50"></el-table-column>
              <el-table-column prop="sch_code" label="学校代码" width="120"></el-table-column>
              <el-table-column prop="sch_name" label="学校名称"></el-table-column>
              <el-table-column prop="sch_phone" label="电话"></el-table-column>
              <el-table-column prop="sch_level" label="办学层次" width="100"></el-table-column>
              <el-table-column prop="sch_property" label="学校性质" width="100"></el-table-column>
              <el-table-column prop="sch_postal_address" label="详细地址"></el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              layout="prev, pager, next"
              :page-count="total"
              style="float: right;"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import common from '../../../assets/js/common'
import http from './../../../assets/js/http'
export default {
  data() {
    return {
      currentPage: 1,
      total: 1,
      provinces: common.province,
      propertys: [
        {
          value: '选项1',
          label: '民办'
        },
        {
          value: '选项2',
          label: '公办'
        }],
      levels: [
        {
          value: '选项1',
          label: '本科'
        },
        {
          value: '选项2',
          label: '专科'
        }],
      currentSch: {
        sch_code: '', // 学校代码
        sch_name: '', // 学校名称
        sch_property: '', // 学校性质
        sch_phone: '', // 联系电话
        sch_faxaphone: '', // 传真
        sch_type: '', // 学校属性
        sch_authorities: '', // 隶属部门
        sch_level: '', // 办学层次
        sch_province: '', // 省份
        sch_address: '', // 位置
        sch_postal_address: '', // 详细地址
        sch_postal_code: '' // 邮编
      },
      seeSchList: true,
      searchData: {
        sch_code: '',
        sch_name: ''
        /* sch_province: '' */
      },
      loading: true,
      schList: [],
      boxDisabled: false,
      editBtn: false,
      addBtn: true,
      reBtnDis: false,
      userInfo: Lockr.get("userInfo"),
      searchId: 0,
      multipleSelection: [],
      tips: {
        'sch_addressTips': '位置',
        'sch_authoritiesTips': '隶属部门',
        'sch_codeTips': '学校代码',
        'sch_faxaphoneTips': '传真',
        'sch_levelTips': '办学层次',
        'sch_nameTips': '学校名称',
        'sch_phoneTips': '联系电话',
        'sch_postal_addressTips': '详细地址',
        'sch_postal_codeTips': '邮编',
        'sch_propertyTips': '学校性质',
        'sch_provinceTips': '省份',
        'sch_typeTips': '学校属性'
      },
      deleteLoading: false
    }
  },
  methods: {
    reSch() {
      _g.toastMsg('warning', '新增学校信息，请完整填写')
      this.currentSch = {}
      /* 
        1.修改的保存换为新增的保存
        2.设置学校名称、学校代码的disable为可编辑 
        3.设置重置按钮不能被点击
      */
      this.editBtn = false
      this.addBtn = true
      if(this.boxDisabled == true){
        this.boxDisabled = !this.boxDisabled
      }
      this.reBtnDis = !this.reBtnDis
    },
    clickRow(row) {
      _g.toastMsg('warning', '修改完信息，保存请点击下方修改按钮')
      this.currentSch = row
      // 设置学校名称、学校代码的disable为不可编辑
      this.boxDisabled = true
      this.reBtnDis = false
      this.addBtn = false
      this.editBtn = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteSch(row) {
      this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteLoading = true
          console.log(row)
          let ids = []
          for (let i = row.length - 1; i >= 0; i--) {
            ids[i] = row[i].sch_id
          }
          console.log(ids)
          this.apiPost('admin/Train/EduschDelete', {sch_id: ids}).then((res) => {
            this.handelResponse(res, (data) => {
              _g.toastMsg("success", res.data)
              // 当前删除数量 == table.length && currentPage > 1  page--
              if (ids.length === this.schList.length && this.currentPage !== 1) {
                this.currentPage--
              }
              this.handleCurrentChange(this.currentPage)
              this.deleteLoading = false
            })
          })
        }).catch(() => {
          // handle error
        })
    },
    saveSch() {
      // 新增保存成功过后，页面显示的是 “重置” 和 “新增保存” 的按钮
      this.reBtnDis = false
      var checkResult = this.checkList(this.currentSch, [
        {
          'name': 'sch_code',
          'reg': ['notnull', 'code']
        },
        {
          'name': 'sch_name',
          'reg': ['notnull', 'info']
        },
        {
          'name': 'sch_property',
          'reg': ['notnull']
        },
        {
          'name': 'sch_phone',
          'reg': ['notnull', 'office']
        }, 
        {
          'name': 'sch_faxaphone',
          'reg': ['notnull', 'fax']
        },
        {
          'name': 'sch_type',
          'reg': ['notnull', 'info']
        },
        {
          'name': 'sch_authorities',
          'reg': ['notnull', 'info']
        },

        {
          'name': 'sch_level',
          'reg': ['notnull']
        },
        {
          'name': 'sch_province',
          'reg': ['notnull']
        },
        {
          'name': 'sch_address',
          'reg': ['notnull']
        },
        {
          'name': 'sch_postal_address',
          'reg': ['notnull']
        },
        {
          'name': 'sch_postal_code',
          'reg': ['notnull', 'postalcode']
        }
      ])
      if(_g.j2s(checkResult) === '{}'){
        let data = this.currentSch
        console.log(data)
        this.apiPost('admin/Train/EduschWrite', data).then((res) => {
          this.handelResponse(res, (data) => {
            _g.toastMsg("success", res.data)
            // this.currentSch = {}
            this.currentSch = {
              sch_code: '', // 学校代码
              sch_name: '', // 学校名称
              sch_property: '', // 学校性质
              sch_phone: '', // 联系电话
              sch_faxaphone: '', // 传真
              sch_type: '', // 学校属性
              sch_authorities: '', // 隶属部门
              sch_level: '', // 办学层次
              sch_province: '', // 省份
              sch_address: '', // 位置
              sch_postal_address: '', // 详细地址
              sch_postal_code: '' // 邮编
            }
            this.currentPage = 1
            this.handleCurrentChange(this.currentPage)
          })
        })
      } else {
        for (const key in checkResult) {
          _g.toastMsg('error', this.tips[key] + checkResult[key])
          break
        }
      }
    },
    editSch() {
      console.log(this.currentSch)
      let data = _g.cloneJson(this.currentSch)
      data.sch = data.sch_name
      console.log(data)
      this.apiPost('admin/Train/TeacherSchrevise', data).then((res) => {
        this.handelResponse(res, (data) => {
          _g.toastMsg("success", res.data)
          this.getSchList()
        })
      })
    },
    searchSch() {
      this.currentPage = 1
      this.getSchList()
    },
    getSchList() {
      this.loading = true
      let data = {
        page: this.currentPage,
        sch_code: this.searchData.sch_code,
        sch_name: this.searchData.sch_name
      }
      if (this.userInfo.sch !== null) {
        data['sch'] = Lockr.get('schInfo')['sch_id_' + this.userInfo.sch]['sch_name'] //name
        // data['sch'] = this.I.sch //id
      }
      this.apiPost('admin/Train/TeacherSchlist', data).then((res) => {
        this.handelResponse(res, (data) => {
          // 当为高校管理员的账号登陆的时候，只渲染上面的currentSch的form表单信息
          if(this.userInfo.level === 2) {
            this.boxDisabled = !this.boxDisabled
            this.currentSch = res.data.data[0]
          } else {
            this.schList = res.data.data
          }
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      /* 
        1.若是点击所有信息列表的currentPage，则加载getSchList()
        2.若是点击的搜索页面的currentPage，则加载searchSch()
       */
      this.getSchList()
    },
  },
  created() {
    _g.closeGlobalLoading()
    // 当为高校管理员的账号登陆的时候，只显示上面的currentSch的form表单信息
    if(this.userInfo.level === 2) {
      this.seeSchList = false
    }
    this.getSchList()
  },
  computed: {
  },
  components: {
  },
  mixins: [http]
}

</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.col-group {
  padding-right: 15px;
  padding-left: 15px;
}
.input-width {
  width: 90%;
}
.el-form-item {
  margin-bottom: 0px;
}

/* .el-table td, .el-table th {
  padding: 12px 0 !important;
} */
</style>
